<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>tupian</title>
</head>
<style type="text/css">
	.bgM{
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1000;
	    background-color: rgba(0,0,0,0.85);
	    overflow: hidden;
	    background-attachment:fixed;
	}
	.bgM img{
	    width: 100%;
	    position: absolute;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1001;
	    margin: auto;
	}
	#imgViewer{
		width: 100%;
	    height: 100%;
	    /*opacity: 0.2;*/
	    position: fixed;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1000;
	    background-color: rgba(0,0,0,0.85);
	    overflow: hidden;
	    background-attachment:fixed;
	}
	.full-image {
		/*opacity: 0.2;*/
	}
	.full-image img{
		width: 100%;
	    position: absolute;
	    top: 0;left: 0;right: 0;bottom: 0;
	    z-index: 1001;
	    margin: auto;
	}
</style>
<body>
<div id="con">
	<img src="./img/tibet-1.jpg">
	<img src="./img/tibet-2.jpg">
	<img src="./img/tibet-3.jpg">
	<p><img src="./img/tibet-4.jpg"></p>
	<a><img src="./img/tibet-5.jpg"></a>
</div>

<!-- <div id="imgViewer">
<div class="full-image" id="img-0">
<img src="file:///D:/software/phpstudy/PHPTutorial/WWW/jsCode/project/imgViewer/img/tibet-1.jpg">
</div>
<div class="full-image" id="img-1">
<img src="file:///D:/software/phpstudy/PHPTutorial/WWW/jsCode/project/imgViewer/img/tibet-2.jpg">
</div>
</div> -->

<script type="text/javascript">
var $Dom = document.querySelector("img");

var $Dom = document.getElementById('con');

var img = $Dom.getElementsByTagName('img');

// var imgViewer = document.createElement("div");
// 	imgViewer.id = 'imgViewer';		
// 	var divHtml = '';

// console.log(img);
for (var i = 0; i < img.length; i++) {
	var imgObj = img[i];
	var imgSrc = imgObj.src;
	imgObj.onclick = function (argument) {
		
		var src = this.src;
		
		var objE = document.createElement("div");
	    objE.innerHTML = '<div class="bgM" >' +
	            '<img src="'+this.src+'"  id="img_scan"/>' +
	        '</div>';

	    console.log(objE);	
	    document.body.appendChild(objE.children[0]);
	    //退出图片预览事件
	    var $bg = document.querySelector(".bgM");
	    $bg.onclick = function() {
	        var dm = document.querySelector(".bgM");
	        document.body.removeChild(dm);
	    }
	}
	// divHtml += '<div class="full-image" id="img-'+i+'"><img src="'+imgSrc+'"></div>'
	
}
// imgViewer.innerHTML = divHtml;
// document.body.appendChild(imgViewer);
// console.log(imgViewer.children);


</script>



<!-- <div class="full-image" id="baguette-img-0">
	<figure>
	<img src="http://static.niudiao.cn/p/image/2017-06-28/9587d18f20e41dcecb49415147a80476.jpg">
	</figure>
</div> -->


</body>
</html>